@charset "utf-8";
/* 客服 CSS */

.online-tit{
	float:left;
	width:125px;
	height:45px;
	position:relative;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	background:#00c0ff}
.online-tit span{
	color:#fff;
	display:block;
	height:45px;
	line-height:45px;
	padding-left:20px;
	font-size:14px}
.online-tit i{
	position:absolute;
	top:17px;
	right:20px;
	display:block;
	width:12px;
	height:12px;
	cursor:pointer;
	transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	-webkit-transition:all .5s;
	background:url(../images/newkf-ico.png) no-repeat 0 bottom}
.online-tit i:hover{
	transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	-webkit-transform:rotate(180deg)}
.kf-menuList{
	float:left;
	width:125px;}
.kf-menuList li{
	float:left;
	width:125px;
	height:42px;
	margin-bottom:1px;
	cursor:pointer;
	position:relative;
	background:#f5f5f5}
.kf-menuList li .show-lm{
	display:block;
	color:#353434;
	height:42px;
	line-height:42px}
.kf-menuList li:hover .show-lm{
	color:#fff;
	transition:all .3s;
	background:#565656}
.kf-menuList li .show-lm i,
.kf-backTop i{
	float:left;
	width:19px;
	height:18px;
	margin:12px 12px 0 18px;
	background:url(../images/newkf-ico.png) no-repeat}
.kf-menuList li .show-lm i.ico01{
	background-position:0 1px}
.kf-menuList li .show-lm i.ico02{
	background-position:0 -46px}
.kf-menuList li .show-lm i.ico03{
	background-position:0 -85px}
.kf-menuList li .show-lm i.ico04{
	background-position:0 -129px}
.kf-menuList li .show-lm i.ico05{
	background-position:0 -170px}

.kf-menuList li:hover .show-lm i.ico01{
	background-position:-24px 1px}
.kf-menuList li:hover .show-lm i.ico02{
	background-position:-24px -46px}
.kf-menuList li:hover .show-lm i.ico03{
	background-position:-24px -85px}
.kf-menuList li:hover .show-lm i.ico04{
	background-position:-24px -129px}
.kf-menuList li:hover .show-lm i.ico05{
	background-position:-24px -170px}

.kf-menuList li .show-lm .point{
	position:absolute;
	right:10px;
	top:12px}

.kf-menuList li .show-con{
	display:none;
	position:absolute;
	left:125px;
	top:0;
	padding:2px;
	animation:myFadein .5s;
	background:#565656}
.kf-menuList li:hover .show-con{
	display:block}
.kf-menuList li .show-con .phone-num{
	color:#fff;
	width:110px;
	height:38px;
	line-height:38px;
	text-align:center;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif}

.kf-menuList li .show-con .wechat-pic,
.kf-menuList li .show-con .wechat-pic img{
	float:left;
	width:81px;
	height:81px}

.kf-menuList li .show-con .toll-freeCall{
	padding:3px;
	position:relative}
.kf-menuList li .show-con .toll-freeCall .num-text{
	width:110px;
	height:28px;
	line-height:28px;
	padding:0;
	border:0;
	font-family:'微软雅黑';
	font-size:12px;
	background:#fff}
.kf-menuList li .show-con .toll-freeCall .call-btn{
	color:#fff;
	width:110px;
	height:28px;
	line-height:28px;
	padding:0;
	border:0;
	margin-top:10px;
	cursor:pointer;
	font-size:14px;
	font-family:'微软雅黑';
	border-radius:3px;
	background:#f88803}
.kf-menuList li .show-con .toll-freeCall .call-btn:hover{
	background:#ffa800}
.kf-menuList li .show-con .toll-freeCall .txtCon{
	display:none;
	position:absolute;
	left:-2px;
	top:80px;
	color:#666;
	width:109px;
	line-height:16px;
	padding:5px 3px;
	font-family:'宋体';
	border:1px solid #d2d2d2;
	border-radius:5px;
	background:#fff}
.kf-menuList li .show-con .toll-freeCall .txtCon:before{
	content:' ';
	display:block;
	width:9px;
	height:5px;
	position:absolute;
	left:50%;
	top:-5px;
	margin-left:-5px;
	background:url(../images/newkf-ico.png) no-repeat right bottom}

.kf-backTop{
	float:left;
	color:#929292;
	width:125px;
	height:40px;
	line-height:40px;
	cursor:pointer}
.kf-backTop:hover{
	color:#00c0ff}
.kf-backTop i{
	background:url(../images/newkf-ico.png) no-repeat 1px -215px}
.kf-backTop:hover i{
	background:url(../images/newkf-ico.png) no-repeat -23px -215px}


@keyframes myFadein{
	
	0%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:translatex(-20px)
	}
	
	100%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:translatex(0)
	}
	
}

@-webkit-keyframes myFadein{
	
	0%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:translatex(-20px)
	}
	
	100%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:translatex(0)
	}
	
}

@-moz-keyframes myFadein{
	
	0%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:translatex(-20px)
	}
	
	100%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:translatex(0)
	}
	
}

@-ms-keyframes myFadein{
	
	0%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:translatex(-20px)
	}
	
	100%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:translatex(0)
	}
	
}

@-o-keyframes myFadein{
	
	0%{
			opacity:0;
			filter:alpha(opacity=0);
			-webkit-transform:translatex(-20px)
	}
	
	100%{
			opacity:1;
			filter:alpha(opacity=100);
			-webkit-transform:translatex(0)
	}
	
}

/*客服收起*/
.sm-kfBox{
    display: none;
    width: 45px;
    position:absolute;
    right:20px;
    top:300px;
    z-index:99999
}
.sm-kfBox .sm-showKf,
.sm-kfBox .sm-backTop{
    float: left;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background: url("../images/small-ico.png") no-repeat;
}
.sm-kfBox .sm-showKf{
    margin-bottom: 5px;
    background-position: 0 0;
}
.sm-kfBox .sm-showKf img{
    float: right;
    margin: 3px 5px 0 0;
}
.sm-kfBox .sm-backTop{
    background-position: 0 -46px;
}


@keyframes myFadein{

    0%{
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translatex(-20px)
    }

    100%{
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:translatex(0)
    }

}

@-webkit-keyframes myFadein{

    0%{
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translatex(-20px)
    }

    100%{
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:translatex(0)
    }

}

@-moz-keyframes myFadein{

    0%{
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translatex(-20px)
    }

    100%{
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:translatex(0)
    }

}

@-ms-keyframes myFadein{

    0%{
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translatex(-20px)
    }

    100%{
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:translatex(0)
    }

}

@-o-keyframes myFadein{

    0%{
        opacity:0;
        filter:alpha(opacity=0);
        -webkit-transform:translatex(-20px)
    }

    100%{
        opacity:1;
        filter:alpha(opacity=100);
        -webkit-transform:translatex(0)
    }

}
































